import type {
  // FunctionalComponent,
  defineComponent,
} from 'vue'
import type { ComponentType } from '../../types/componentType'
import { componentMap } from '/@/vbenComponents/Table/src/componentMap'

import { Popover } from 'ant-design-vue'
import { h } from 'vue'
import { omit } from 'lodash-es'
export interface ComponentProps {
  component: ComponentType
  rule: boolean
  popoverVisible: boolean
  ruleMessage: string
  getPopupContainer?: Fn
}
// TODO 这里比较特殊，估计是v3.x和v2.x的 区别
export const CellComponent: any = (
  //{ component = 'Input', rule = true, ruleMessage, popoverVisible, getPopupContainer }: ComponentProps,
  //{ attrs }
  { data }
) => {
  const { component = 'Input', rule = false, ruleMessage, popoverVisible }: ComponentProps = data.attrs
  const { getPopupContainer }: ComponentProps = data
  const Comp = componentMap.get(component) as typeof defineComponent
  const DefaultComp = (
    <div>
      {h(Comp as any, {
        props: data,
        ...omit(data, 'style'),
        attrs: { ...(getPopupContainer ? { getPopupContainer } : {}), ...data.attrs },
      })}
    </div>
  )
  if (!rule) {
    return DefaultComp
  }
  return (
    <div>
      {h(
        Popover,
        {
          props: {
            overlayClassName: 'edit-cell-rule-popover',
            visible: !!popoverVisible,
          },
          ...omit(data, 'style'),
          attrs: { ...(getPopupContainer ? { getPopupContainer } : {}), ...data.attrs },
          scopedSlots: { content: () => ruleMessage },
        },
        [DefaultComp]
      )}
    </div>
  )
}
